<!-- 示例5: 搜索和过滤 -->
<template>
  <Table
      :data="customers"
      :columns="columns"
      :show-search="true"
      :virtualScroll="true"
      stripe
      border
      size="small"
  />
</template>

<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.vue'

// 模拟客户数据
const customers = ref([
  { id: 1, name: '张三', age: 28, city: '北京', level: '黄金', points: 2800, lastVisit: '2024-03-01' },
  { id: 2, name: '李四', age: 35, city: '上海', level: '白银', points: 1500, lastVisit: '2024-03-02' },
  { id: 3, name: '王五', age: 42, city: '广州', level: '铂金', points: 3500, lastVisit: '2024-03-03' },
  { id: 4, name: '赵六', age: 31, city: '深圳', level: '黄金', points: 2300, lastVisit: '2024-03-04' },
  { id: 5, name: '钱七', age: 29, city: '杭州', level: '白银', points: 1800, lastVisit: '2024-03-05' },
  { id: 6, name: '孙八', age: 45, city: '成都', level: '钻石', points: 5000, lastVisit: '2024-03-06' },
  { id: 7, name: '周九', age: 33, city: '武汉', level: '黄金', points: 2600, lastVisit: '2024-03-07' },
  { id: 8, name: '吴十', age: 38, city: '南京', level: '铂金', points: 3200, lastVisit: '2024-03-08' },
  { id: 9, name: '郑十一', age: 27, city: '西安', level: '白银', points: 1600, lastVisit: '2024-03-09' },
  { id: 10, name: '王十二', age: 36, city: '重庆', level: '黄金', points: 2900, lastVisit: '2024-03-10' }
])

// 列配置
const columns = [
  { title: '姓名', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' },
  { title: '城市', dataIndex: 'city' },
  { title: '会员等级', dataIndex: 'level' },
  { title: '积分', dataIndex: 'points' },
  { title: '最近访问', dataIndex: 'lastVisit' }
]
</script>